import React, { memo, useEffect } from "react";
import { Outlet, useNavigate, useParams } from "react-router-dom";
import PlaylistWarrper from "./style";
import { Spin, Tabs } from "antd";
import { getPlaylistInfo } from "@/store/modules/playlistDetailSlice";
import { useDispatch, useSelector } from "react-redux";
import { changeLoading } from "@/store/modules/themeSlice";

import SongShowList from "@/base-ui/Song-show-list";
import Loading from "@/base-ui/Loading";

const index = memo((props) => {
  const params = useParams();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getPlaylistInfo(params.id));
  }, [params]);
  useEffect(()=>{
    if(playlistDetail?.playlist?.tracks?.length>=1){
        setTimeout(()=>{
          dispatch(changeLoading(false));
        },700)
    }
  })
  useEffect(()=>{
    return ()=>{
      dispatch(changeLoading(true))
    }
  },[])
  const { playlistDetail,isLoading,playList } = useSelector((state) => {
    return {
      playlistDetail: state?.playlistDetail.playlistdetail,
      isLoading:state.theme.isLoading,
      playList:state.player.playerList
    };
  });

  const tab = [
    {
      to: `/playlistDetail/${params.id}/song`,
      msg: "歌曲32",
    },
    {
      to: `/playlistDetail/${params.id}/comment`,
      msg: "评论49",
    },
  ];
  const items = [
    { label: "账户密码登录", key: "account" },
    { label: "手机号登录", key: "mobile" },
  ];

  // 下载歌曲
  function downloadMp3(filePath) {
    fetch(filePath).then(res => res.blob()).then(blob => {
      const a = document.createElement('a');
      document.body.appendChild(a)
      a.style.display = 'none'
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = 'xxxx.mp3';
      a.click();
      document.body.removeChild(a)
      window.URL.revokeObjectURL(url);
    });
  }
  function download(id) {
    // console.log("下载",`https://music.163.com/song/media/outer/url?id=${id}.mp3`);
    downloadMp3(`https://music.163.com/song/media/outer/url?id=${id}.mp3?response-content-type=application/octet-stream'`);
  }
  return (
    
    <PlaylistWarrper>
      {
        isLoading?(
          <Loading/>
        ):( <div>
          <div className="header">
              <div className="img">
                <img src={playlistDetail?.playlist?.coverImgUrl} alt="" />
              </div>
              <div className="info">
                <div className="title">{playlistDetail?.playlist?.name}</div>
                <div className="creator">
                  <div className="user">
                    <img src={playlistDetail?.playlist?.creator?.avatarUrl} alt="" />
                    &nbsp;{playlistDetail?.playlist?.creator?.nickname}
                  </div>
                  <div className="tags">
                    {playlistDetail?.playlist?.creator?.expertTags?.map((n, i) => {
                      return <span key={i}>#{n}&nbsp;</span>;
                    })}
                  </div>
                </div>
                <div className="msg">{playlistDetail?.playlist?.description}</div>
                <div className="btn">
                  <div className="btnAll">播放全部</div>
                </div>
              </div>
            </div>
            <Tabs
              items={[
                {
                  label: `歌曲32`,
                  key: "1",
                  children: (
                    <SongShowList data={playlistDetail?.playlist?.tracks} />
                  ),
                },
                {
                  label: `评论49`,
                  key: "2",
                  children: `Content of Tab Pane 2`,
                },
              ]}
            />
      
            <Outlet />
          </div>)
      }
   
    </PlaylistWarrper>
  );
});

export default index;
